<template>
  <div class="root">
    <select v-model="selectVal">
      <option value="mikaisa">mikaisa</option>
      <option value="mika">mika</option>
      <option value="alan">alan</option>
      <option value="jackson">jackson</option>
    </select>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  setup() {
    const selectVal = ref("");

    // 不同于watch，watchEffect会在页面加载的时候就触发一次，使用它的时候也无需再指定数据，只要你在回调函数中引用了的数据发生变化，他就会触发，比如这里引用了selectVal，那么当它变化的时候就会触发这个回调函数。有点像computed。这个会更适合一些异步操作，比如某个数据变化，我们就要调接口的这种场景
    watchEffect(() => {
      console.log(`selectVal变了${selectVal.value}`);
    });

    return {
      selectVal,
    };
  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
